<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: tianhao
 * @LastEditTime: 2022-01-10 16:30:46
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" id="container" style="height: 95%"></div>
</template>

<script>

import {Column} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[{
    type: '美国',
    sales: 490000,
  },
  {
    type: '法国',
    sales: 300000,
  },
  {
    type: '意大利',
    sales: 200000,
  },
  {
    type: '印度',
    sales: 160000,
  },
  {
    type: '英国',
    sales: 140000,
  }]
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
  
initChart(){
  const column = new Column(this.$refs.left2_container,{
    data:this.dataArr,
    xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
});

column.render();
}
}
}
</script>

<style scoped>

</style>